<%@ page language="java" contentType="text/html; charset=utf-8"
         pageEncoding="utf-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!--<base href="http://api.xszhuan.com/TianciXSZ/">--><base href=".">

    <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" name="viewport">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store, must-revalidate">
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta http-equiv="expires" content="0">
    <title>刮刮卡</title>
    <link href="<%=basePath%>guaguale/activity-style.css" rel="stylesheet" type="text/css">

    <style type="text/css">
        .box .title-brown {
            padding: 0 5px 0px 10px;
            background:url(<%=basePath%>guaguale/title-bg-brown.png) no-repeat 0 0;
            border-radius: 3px 3px 3px 0;
            color:#ffffff;
            height:22px;
            margin:-1px;
            /*-moz-text-shadow:0 1px 0 #8d0001;-webkit-text-shadow:0 1px 0 #8d0001;text-shadow:0 1px 0 #8d0001;
            text-shadow:0px 1px 0 #8d0001;*/
        }
        .submit{filter:Alpha(opacity=90); background:#fff;/*实现IE背景透明*/ background:  url(<%=basePath%>guaguale/button2.png) left top no-repeat;height: 40px;padding:0px 0px 0px 3px; margin:0px 0px 0px 0px;  float:left;display:inline-block;border:0px;  overflow:hidden;}
        .submit input{filter:Alpha(opacity=80); background:#fff; background:  url(<%=basePath%>guaguale/button2.png) right top no-repeat;height:27px; margin:0px; border:none;padding:0px 10px 0px 7px;font-size:14px; color:#fff;font-weight:bold; width:auto;overflow:visible;}
        pre {
            display: block;
            padding: 9.5px;
            margin: 0 0 10px;
            font-size: 13px;
            line-height: 10px;
            word-break: break-all;
            word-wrap: break-word;
            white-space: pre;
            white-space: pre-wrap;
            background-color: #f5f5f5;
            border: 1px solid #ccc;
            border: 1px solid rgba(0,0,0,0.15);
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            border-radius: 4px;
        }
        pre code {
            padding: 0;
            color: inherit;
            white-space: pre;
            white-space: pre-wrap;
            background-color: transparent;
            border: 0;
        }

    </style>

    <style>#haloword-pron { background: url(chrome-extension://bhkcehpnnlgncpnefpanachijmhikocj/img/icon.svg) -94px -34px; }#haloword-pron:hover { background: url(chrome-extension://bhkcehpnnlgncpnefpanachijmhikocj/img/icon.svg) -111px -34px; }#haloword-open { background: url(chrome-extension://bhkcehpnnlgncpnefpanachijmhikocj/img/icon.svg) -94px -17px; }#haloword-open:hover { background: url(chrome-extension://bhkcehpnnlgncpnefpanachijmhikocj/img/icon.svg) -111px -17px; }#haloword-close { background: url(chrome-extension://bhkcehpnnlgncpnefpanachijmhikocj/img/icon.svg) -94px 0; }#haloword-close:hover { background: url(chrome-extension://bhkcehpnnlgncpnefpanachijmhikocj/img/icon.svg) -111px 0; }#haloword-add { background: url(chrome-extension://bhkcehpnnlgncpnefpanachijmhikocj/img/icon.svg) -94px -51px; }#haloword-add:hover { background: url(chrome-extension://bhkcehpnnlgncpnefpanachijmhikocj/img/icon.svg) -111px -51px; }#haloword-remove { background: url(chrome-extension://bhkcehpnnlgncpnefpanachijmhikocj/img/icon.svg) -94px -68px; }#haloword-remove:hover { background: url(chrome-extension://bhkcehpnnlgncpnefpanachijmhikocj/img/icon.svg) -111px -68px; }</style></head>
<body data-role="page" class="activity-scratch-card-winning">
<pre id="pre" style="display:none; width: 70%;margin-left: 15%;position: absolute; bottom:0px; left: 0px;z-index: 1000;"><code><output id="out" style="color: red;">
    竞猜成功!请等待开奖
</output></code></pre>
<script src="<%=basePath%>guaguale/jquery.js" type="text/javascript"></script>
<div class="main">
<div class="cover" style="height: 215px;">
    <img src="<%=basePath%>guaguale/activity-scratch-card-bannerbg.png">
    <div id="prize" style="top: 100px;left: 93px;">
    </div>
    <div id="prize_hidden" style="position:absolute;  color:#000;text-align:center; font-size:15px; top:110px;left:133px;  z-index: 2">&nbsp;五&nbsp;等&nbsp;奖</div>
    <!--  width: 136px;height: 36px; -->
    <div id="scratchpad" style="top: 107px;left: 93px;  z-index: 30">
        <canvas id="myCanvas" width="150" height="40" style=" ">
            您的浏览器不支持html5标签，您可以尝试换个浏览器。
        </canvas>
    </div>

    <input class="submit" onclick="h()" id="flush" type="button" style="   width:201px;height: 40px;margin:0px;padding:0px; margin-left: 20%;margin-top: 1px; ">
    <!-- 	<img  onclick="h()" id="flush"  style="background-image: url('resources/guaguaka2//button2.png');
 width: 201px;height: 40px;
text-align: center;margin:0px;padding:0px; margin-left: 23%;margin-top: 1px; border: 0px solid #fff;
    " />
 <input class="pxbtn" onclick="h()" id="flush" id="save-btn" type="button" style="   width:70%;text-align: center;margin:0px;padding:0px; margin-left: 15%;margin-top: 1px;background: #39B7E7;border-radius: 3px;border: 1px solid #DDDCDB;"  value="再来一次">
-->
</div>

<div class="content" style="margin-top: 5px;">
    <div id="zjl" style="display:none;" class="boxcontent boxwhite">
        <div class="box">
            <div class="title-red">
							<span>
								恭喜你中奖了
							</span>
            </div>
            <div class="Detail">
                <p>
                    你中了：
								<span class="red">
									谢谢参与
								</span>
                </p>

                <p class="red"></p>

                <p>

                </p></div>
        </div>
    </div>

    <div class="boxcontent boxwhite" style="background-repeat: no-repeat; ">

        <div class="box" style="background-color: #EAE9DB;color: #9E9E99;border: 0px;">
            <div class="title-brown" style="height: 43px;background-color: #EAE9DB;margin-left: 0px;">

            </div>
            <div class="Detail">
                <div class="red" style="color: #9E9E99;">
								<span> 当前您共有  			<span><b style="font-size: 25px;color: red;" id="count">${gglcount}</b></span>
								    次刮奖机会</span> <br>
                    <b style="font-size: 20px;">刮开刮奖区100%中奖 :</b> <br>
                    <span style=""> 一等奖<b style=" color: red;" id="ttt">50万</b>钱币&nbsp;&nbsp;&nbsp;&nbsp;二等奖<b style=" color: red;" id="ttt">10万</b>钱币,</span><br>

                    <span style=""> 三等奖<b style=" color: red;" id="ttt"> 5&nbsp;万</b>钱币&nbsp;&nbsp;&nbsp;&nbsp;四等奖<b style=" color: red;" id="ttt"> 2&nbsp;万</b>钱币,</span><br>
                    <span style=""> 五等奖<b style=" color: red;" id="ttt">  1&nbsp;万</b>钱币</span><br>
                    <b style="font-size: 20px;">刮奖机会获取方法: </b> <br>
                    1.邀请一个有效好友奖励一次刮奖机会<br>2.通过官方举办的活动来获取刮奖机会.
                </div>

            </div>
        </div>
    </div>

    <div style="clear:both;">
    </div>
    <input type="hidden" value="0" id="num">
    <input type="hidden" value="0" id="type_id">
    <input type="hidden" value="${userid}" id="userId">
</div>
<script type="text/javascript">

var c = false;
var d = 0;
var e = true;

// 刮
var f = false;//是否锁定

function fff() {

//    var type_id = document.getElementById("type_id").value ;
//    if(type_id == "1"){
//        show_msg("请先完善帐号资料");
//        return ;
//    }
    //   show_msg("恭喜中奖! 本次刮出"+ userAgent+"!继续加油喔!");
    if (f) {
        return ;
    };
    var j = $("#num").val();
    if (j == "-1") {
        return
    };
    var k = document.getElementById("count");
    var l = parseInt(k.innerHTML);
    if (l <= 0) {
        //
        show_msg("童鞋 你的刮奖次数用完啦!");
        //    javascript:contact.toast("童鞋 你的刮奖次数用完啦!");
        //    alert("童鞋 你的刮奖次数用完吧!");
        return;
    };
    var m = i(32, j);

    f = true;
    var o = "<%=basePath%>gglController/dui?userid="+ $("#userId").val();//后台增加总积分

    $.ajax({
        url: o,
        type: "GET",
        dataType: "html",
        success: function(p) {

            var msg=eval("("+p+")");
            var cont=msg;
            var contnet=cont.replace(/\\"/g, "\'");

            var c=eval("("+contnet+")");

            if(c.status== "error"){
                show_msg("没有机会啦!");

                //  	javascript:contact.toast("没有机会啦!");
                return ;
            }


            // javascript:contact.toast("恭喜你 获得"+(l)+"钱币!");
            //alert((l -1));
            if(l>=1){
                k.innerHTML = (l -1)+"";
                f = false;
            }
            else {
                k.innerHTML = "0";
                f = true;
            }

            document.getElementById("num").value = "-1";

            var tmp_num = document.getElementById("prize_hidden").innerHTML;
            tmp_num = tmp_num.replaceAll("&nbsp;","");


            show_msg("恭喜中奖! 本次刮出"+ tmp_num+"!继续加油喔!");
            updatePoint(p);


            // javascript:contact.toast("恭喜中奖! 本次刮出"+ tmp_num+"!继续加油喔!");
        }
    });
}

function updatePoint(t_point){
    if(userAgent == "android"){
        javascript:contact.updatePoint(t_point);
    }else{
        var uri = '<%=basePath%>gglController/ggl?userid='+$("#userId").val();
        window.location = uri;
    }
}
function flushGua(j){

    resize();

    d = parseInt(j);
    if (d == 0) {
        document.getElementById('prize_hidden').innerHTML = "&nbsp;五&nbsp;等&nbsp;奖";
    } else if (d == 1) {
        document.getElementById('prize_hidden').innerHTML = "&nbsp;四&nbsp;等&nbsp;奖";
    } else if (d == 2) {
        document.getElementById('prize_hidden').innerHTML = "&nbsp;三&nbsp;等&nbsp;奖";
    } else if (d == 3) {
        document.getElementById('prize_hidden').innerHTML = "&nbsp;二&nbsp;等&nbsp;奖";
    } else if (d == 4) {
        document.getElementById('prize_hidden').innerHTML = "&nbsp;一&nbsp;等&nbsp;奖";
    }
}
String.prototype.replaceAll = function(reallyDo, replaceWith, ignoreCase) {
    if (!RegExp.prototype.isPrototypeOf(reallyDo)) {
        return this.replace(new RegExp(reallyDo, (ignoreCase ? "gi": "g")), replaceWith);
    } else {
        return this.replace(reallyDo, replaceWith);
    }
}
//刷新  是否有可以刮奖机会
function h() {
    var j = document.getElementById("num");
    var k = document.getElementById("count").innerHTML;
    if (parseInt(k) <= 0) {

        show_msg("童鞋 你的刮奖次数用完啦!");

        //javascript:contact.toast("童鞋 你的刮奖次数用完啦!");
        //alert("童鞋 你的刮奖次数用完吧!");
        f = true;
        return
    };
    var m = "<%=basePath%>gglController/flush";


    $.post(m,{random:Math.random()},function(rs){

//        var msg=eval("("+rs+")");
//        var cont=msg;
//        var contnet=cont.replace(/\\"/g, "\'");
//
//        var c=eval("("+contnet+")");

        flushGua(0);

        f = false;
    });

};

//刷新

function i(j, k) {
    var l = "123456789poiuytrewqasdfghjklmnbvcxzQWERTYUIPLKJHGFDSAZXCVBNM";
    var m = "";
    for (var n = 0; n < j; n++) {
        if (n == 20) {
            m += "" + k;
        } else {
            m += l.charAt(Math.ceil(Math.random() * 100000000) % l.length)
        }
    };
    return m
}

function getLocalCoords(elem, ev) {
    var ox = 0, oy = 0;
    var first;
    var pageX, pageY;
    while (elem != null) {
        ox += elem.offsetLeft;
        oy += elem.offsetTop;
        elem = elem.offsetParent;
    }
    if (ev.hasOwnProperty('changedTouches')) {
        first = ev.changedTouches[0];
        pageX = first.pageX;
        pageY = first.pageY;
    } else {
        pageX = ev.pageX;
        pageY = ev.pageY;
    }
    return { 'x': pageX - ox, 'y': pageY - oy };
}

function scratch(canv, x, y, fresh) {
    var ctx = canv.getContext('2d');

    var r=8;
    for(var i=0;i<=r;i++){
        for(var j=0;j<=r;j++){
            var result1 = r*r - (i*i+j*j);
            if(result1>=0){
                ctx.clearRect(x+i-9,y+j,1,1);
                ctx.clearRect(x-i-9,y+j,1,1);
                ctx.clearRect(x-i-9,y-j,1,1);
                ctx.clearRect(x+i-9,y-j,1,1);
            }
        }
    }
}

var mouseDown = false;

function mousedown_handler(e) {
    var local = getLocalCoords(canvas, e);
    mouseDown = true;
    scratch(canvas, local.x, local.y, true);

    if (e.cancelable) { e.preventDefault(); }
    return false;
};
function mousemove_handler(e) {

    if (!mouseDown) { return true; }
    var local = getLocalCoords(canvas, e);
    //javascript:contact.toast("恭喜中奖! 本次刮出 dddd!"+local.x+" "+local.y );
    scratch(canvas, local.x, local.y, false);//销毁

    if (e.cancelable) { e.preventDefault(); }
    return false;
};
function mouseup_handler(e) {

    if (mouseDown) {
        mouseDown = false;
        if (e.cancelable) { e.preventDefault(); }
        return false;
    }
    return true;
};


function clear(x,y){
    ctx.clearRect(x,y,1,1);
}
function resize(){

    canvas =document.getElementById('myCanvas');
    var ctx=canvas.getContext('2d');
    //ctx.fillRect(0,0,204,104);	//设置覆盖的区域
    ctx.fillStyle = "#A9A9A7";//this.settings.color;
    ctx.beginPath();
//	this.ctx.rect(0, 0, this.settings.width, this.settings.height);
    ctx.rect(0, 0,150,40);


    ctx.fill();

    ctx.strokeStyle = "#8B8B8A";
    // alert(333333);
    ctx.font = "18px 微软雅黑 ";
    ctx.strokeText("刮开此图层", 30, 28);

}
var isg = false;
var canvas =null;
var     userAgent="android" ;
window.onload=function(){


    userAgent =  navigator.userAgent ;//navigator.userAgent

    //  show_msg(navigator.userAgent);
    if(userAgent.indexOf("iPhone") !=-1 ||    userAgent.indexOf("iPod") !=-1 ||   userAgent.indexOf("iphone") !=-1 ||      userAgent.indexOf("iPad") !=-1 ) {
        userAgent ="ios";
    }else{
        userAgent ="android";
    }
    //show_msg(userAgent);
//	document.getElementById("myCanvas").addEventListener('touchstart', sg, false);

    /*
     canvas =document.getElementById('myCanvas');
     var ctx=canvas.getContext('2d');
     //ctx.fillStyle='#aaaaaa';	//设置覆盖层的颜色
     //ctx.fillRect(0,0,204,104);	//设置覆盖的区域

     ctx.fillStyle = "#A9A9A7";//this.settings.color;
     ctx.beginPath();
     //	this.ctx.rect(0, 0, this.settings.width, this.settings.height);
     ctx.rect(0, 0,150,40);


     ctx.fill();

     ctx.strokeStyle = "#8B8B8A";
     // alert(333333);
     ctx.font = "18px 微软雅黑 ";
     ctx.strokeText("刮开此图层", 30, 28);

     */

    var num = document.getElementById("num").value;

    flushGua(num);

    canvas.addEventListener('mousedown', mousedown_handler, false);
    canvas.addEventListener('touchstart', mousedown_handler, false);
    canvas.addEventListener('mousemove', mousemove_handler, false);

    canvas.addEventListener('touchmove', mousemove_handler, false);
    scratch(canvas, 80, 50 , false);//销毁

    document.getElementById("scratchpad").addEventListener('touchstart', fff, false);
}

function show_msg(s){
    var pre = document.getElementById("pre");
    pre.style.display = "block";

    var out = document.getElementById("out");
    out.innerHTML= s;
    setTimeout("clear_msg()",3000);
}
function clear_msg(){

    var pre = document.getElementById("pre");
    pre.style.display = "none";

}
</script>





</div><div id="haloword-lookup" class="ui-widget-content ui-draggable"><div id="haloword-title"><span id="haloword-word"></span><a herf="#" id="haloword-pron" class="haloword-button" title="发音"></a><audio id="haloword-audio"></audio><div id="haloword-control-container"><a herf="#" id="haloword-add" class="haloword-button" title="加入单词表"></a><a herf="#" id="haloword-remove" class="haloword-button" title="移出单词表"></a><a href="http://api.xszhuan.com/TianciXSZ/#" id="haloword-open" class="haloword-button" title="查看单词详细释义" target="_blank"></a><a herf="#" id="haloword-close" class="haloword-button" title="关闭查询窗"></a></div><br style="clear: both;"></div><div id="haloword-content"></div></div></body></html>